<template>
    <div class="roll">
        <div class="roll-content" @mouseenter="mEnter" @mouseleave="mLeave" ref="textCom" @scroll="handleScroll">
            <div ref="scrollItemBox">
                <div class="data-com" v-for="(item, index) in data" :key="index">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';

// 定义响应式变量
const textCom = ref(null);
const scrollItemBox = ref(null);
const timerS = ref(null);
const scrollTop = ref(0);
const speed = ref(30);
const data = ref([100000000000000000, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3]);
const MoveInStart = ref(false);

// 初始化滚动
const initScroll = () => {
    nextTick(() => {
        startScroll();
    });
};

// 鼠标移入停止滚动
const mEnter = () => {
    MoveInStart.value = true;
    if (timerS.value && data.value.length >= 8) {
        clearInterval(timerS.value);
    }
    timerS.value = null;
};

// 鼠标移出继续滚动
const mLeave = () => {
    if (data.value.length >= 8) {
        MoveInStart.value = false;
        startScroll();
    }
};

// 开始滚动
const startScroll = () => {
    if (!timerS.value) {
        timerS.value = setInterval(scroll, speed.value);
    }
};

// 滚动处理方法
const scroll = () => {
    scrollTop.value++;
    // 获取需要滚动的盒子的高度
    let scrollHeight = textCom.value.scrollHeight - textCom.value.offsetHeight;
    textCom.value.scrollTop = scrollTop.value;

    // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
    if (scrollTop.value >= scrollHeight) {
        scrollTop.value = 0;
        textCom.value.scrollTop = 0;
    }
};

// 处理滚动事件
const handleScroll = (event) => {
    // 获取滚动高度
    const st = event.target.scrollTop;
    if (MoveInStart.value) {
        scrollTop.value = st;
    }
};

// 获取信息
const getInfo = () => {
    if (timerS.value) {
        clearInterval(timerS.value);
        timerS.value = null;
    }
    speed.value = 30;
    scrollTop.value = 0;
    initScroll();
};

// 组件挂载时调用
onMounted(() => {
    getInfo();
});

// 组件销毁前清除定时器
onBeforeUnmount(() => {
    if (timerS.value) {
        clearInterval(timerS.value);
        timerS.value = null;
    }
});
</script>

<style lang="scss" scoped>
.roll {
    width: 400px;
    height: 300px;
    margin: auto;

    .roll-content {
        width: 100%;
        height: 100%;
        overflow: auto;
        display: -webkit-box;
        flex-direction: column;
        align-items: center;
        padding-left: 6px;
        margin-top: 5px;
        border: solid;

        .data-com {
            width: 95%;
            height: 25px;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            margin: 2% 0;
            color: #000;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
        }
    }
}

/*滚动条整体样式*/
.roll-content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
}

.roll-content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #14ccf1;
}

.roll-content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #ededed;
}
</style>